<template>
	<view class="pages">
		<u-navbar
		:immersive="true"
		:title-color="isTop?'#fff':'#000'" 
		:back-icon-color="isTop?'#fff':'#000'"
		:background="{
			backgroundColor: `rgba(256,256,256,${opacityNum})`,
		}" 
		:title="isTop?' ':'商品详情'"></u-navbar>
		
		<view class="bgcolor">
			<u-swiper :list="swiperList" height="476"></u-swiper>
		</view>
		
		<view class="vessel" v-if="goods.title">
			<view class="prive" >
				<!-- <text v-if="userInfo.vip_id >= 1" class="discounts"><text>¥</text>{{selectSku.vip_price}}</text> -->
				<text class="discounts">¥ {{selectSku.sale_price}} 
					<text v-if="selectSku.integral_price">+{{selectSku.integral_price}}积分</text>
				</text>
				<!-- <text class="market">¥ {{selectSku.sale_price}}</text> -->
				<!-- <text v-if="userInfo.vip_id < 1 || !token" class="discounts"><text>¥</text>{{selectSku.sale_price}}</text> -->
				<!-- <view v-if="token">
					<button open-type='share' class="sharebtn" >
						<text class="iconfont icon-fenxiang"></text>
						分享
					</button>
				</view>
				<view v-else @click="share">
					<text class="iconfont icon-fenxiang"></text>
					分享
				</view> -->
				<text class="left-auto">已售{{goods.sale_volume}}份</text>
			</view>
			
			<view class="goods-title" v-if="goods">
				{{goods.title}}
			</view>
			
			<view class="detailsGoods">
				<view class="detailsGoods__view">
					<view class="detailsGoods__view-name">保障</view>
					<view class="detailsGoods__view-box">
						<view><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xingxing.png"></image>随时退</view>
						<view><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xingxing.png"></image>过期退</view>
						<view><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xingxing.png"></image>品质保证</view>
						<view><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xingxing.png"></image>7天无理由</view>
					</view>
				</view>
				<view class="detailsGoods__view">
					<view class="detailsGoods__view-name">规格</view>
					<view class="detailsGoods__view-box" @click="show=true">
						{{selectSku.sku_text || '请选择规格'}}
						<text class="iconfont icon-a-arrowbeifen3"></text>
					</view>
				</view>
				<view class="detailsGoods__view">
					<view class="detailsGoods__view-name">发货</view>
					<view class="detailsGoods__view-box" v-if="goods.expect_day">
						立即下单，预计{{dataTime(goods.expect_day)}}发货
					</view>
				</view>
			</view>
			
			<!-- 规格
			<view class="goods-sku">
				<view class="sku" @click="show=true">
					<text class="t1">规格</text>
					<text class="text-int">
						{{selectSku.sku_text}}
					</text>
					<text class="iconfont icon-a-arrowbeifen3"></text>
				</view>
				<view class="sku">
					<text class="t1">数量已选</text>
					<u-number-box
					:min="1" 
					:max="selectSku.stock||1"
					disabled-input
					v-model="value"
					bg-color="#ffffff"
					@plus="plus"
					color="#575757"></u-number-box>
				</view>
			</view> -->
			
			<view class="bgs"></view>
			
			<!-- 用户评价 -->
			<view class="goods-sku" @click="utlis.goUrl(`/pages/shop/comment?goods_id=${goods_id}`)">
				<view class="sku">
					<view class="t1"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>用户评价</view>
					<view class="t2">全部评价</view>
					<view class="iconfont icon-a-arrowbeifen3"></view>
				</view>
				<view class="evaluate" v-if="commentList.user">
					<view class="evaluate__box">
						<view class="evaluate__box-left"><image :src="commentList.user.avatar || '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg234567.png'"></image></view>
						<view class="evaluate__box-right">
							<view class="evaluate__box-right-title">{{commentList.user.username}} <view><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zan.png"></image>五星好评</view></view>
							<view class="evaluate__box-right-dec">
								<text class="left">已购{{commentList.ordersGoods.goods_name}}，{{commentList.ordersGoods.sku_text}}</text>
							</view>
							<text class="evaluate__box-right-time">{{commentList.create_time}}</text>
						</view>
					</view>
					<view class="evaluate__dec">{{commentList.content}}</view>
					<view class="evaluate__img" v-if="commentList.files">
						<image @click="utlis.previewImage(commentList.files)" v-for="(ele,index1) in commentList.files" :key="index1" :src="ele"></image>
					</view>
				</view>
				<view v-else class="available">暂无评论~</view>
			</view>
			
			
			<view class="bgs"></view>
			<view class="goods-info">
				<view class="title"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>商品详情</view>
				<view>
					<u-parse :html="goods.details"></u-parse>
				</view>
			</view>
		</view>
		
		<!-- 支付方式 -->
		<u-popup v-model="show1" safe-area-inset-bottom border-radius="34" closeable mode="bottom">
			<view class="select-pay">
				<view class="title">请选择支付方式</view>
				<view class="select" v-for="(item,i) in pay" :key="item">
					<image :src="item.img" mode="aspectFill"></image>
					<view>{{item.title}}</view>
					<view @click="payIndex=i" :class="payIndex==i?'icon-a-xingzhuang1':'icon-weixuanzhong'" class="iconfont left-auto"></view>
				</view>
				<view class="price-box">
					金额：
					<text>¥869</text>
					<view class="btn">支付</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 规格弹窗 -->
		<u-popup v-model="show" safe-area-inset-bottom mode="bottom"  border-radius="40" closeable>
			<view class="specification">
				<view class="close" @click="show=false">
					<text class="iconfont icon-guanbi"></text>
				</view>
				<view class="goods-msg">
					<image :src="selectSku.img || goods.picture" mode="aspectFill"></image>
					<view class="goods-price">
						<!-- <view class="title"> {{goods.title}}</view> -->
						<view class="price"> <text>¥</text>{{selectSku.sale_price}}</view>
						<view class="inventory" :class="selectSku.stock < 1 ? 'redP' :''">库存： {{selectSku.stock}}</view>
						<view class="pl-title">
							<u-number-box
							:min="1" 
							:max="selectSku.stock||1"
							disabled-input
							v-model="value"
							bg-color="#ffffff"
							@plus="plus"
							color="#575757"></u-number-box>
						</view>
					</view>
				</view>
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view v-for="(item,index) in goods.attr" :key="item.id">
						<view class="t1-title"> {{item.name}} </view>
						<view class="format-box">
							<view v-for="(val,i) in item.val" :key="i"
							:class="{'format-zi-active':i == activeList[index],'format-zi-disabled':val.isShow}"
							@click="addsele(index,i,val)" class="format-zi"> {{val.attr_value}}</view>
						</view>
					</view>
				</scroll-view>
				
				<view style="height: 135rpx;"></view>
				<view class="subimt" v-if="selectSku.stock > 0">
					<view v-if="!isHidCart"  @click="confirm(1)" class="cancel"> 加入购物车 </view>
					<view v-if="isHidCart" @click="confirm(2)" class="confirm hidBuy2"> 立即购买 </view>
					<view v-else @click="confirm(2)" class="confirm"> 立即购买 </view>
				</view>
				<view class="subimt" v-else>
					<view class="grayOut"> 缺货 </view>
				</view>
			</view>
		</u-popup>
		
		<!-- 您还未绑定手机号,请先绑定手机号 -->
		<!-- <u-modal v-model="isPhoneAuth"  :content="'您还未绑定手机号,请先绑定手机号'">
			<view  slot="confirm-button">
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="wxlogin">
					绑定
				</button>
			</view>
		</u-modal> -->
		
		<!-- 您还未登陆,请登录 -->
		<!-- <u-modal v-model="login" show-cancel-button :content="'您还未登陆,请登录'">
			<view  slot="confirm-button">
				<button @click="getuserinfo" class="wxlogin">
					登录
				</button>
			</view>
		</u-modal> -->
		
		<!-- 兼容快手小程序写法 -->
		<u-popup v-model="isPhoneAuth" mode="center" border-radius="20" width="400rpx">
			<view class="loginPop">
				<view class="loginPop-title">您还未绑定手机号,请先绑定手机号</view>
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="wxlogin">
					绑定
				</button>
			</view>
		</u-popup>
		
		<!-- 兼容快手小程序写法 -->
		<u-popup v-model="login" mode="center" border-radius="20" width="400rpx">
			<view class="loginPop">
				<view class="loginPop-title">您还未登陆,请登录</view>
				<view class="loginPop-main">
					<view class="loginPop-main-close" @click="login = false">取消</view>
					<button @click="getuserinfo" class="wxlogin">
						登录
					</button>
				</view>
			</view>
		</u-popup>
		
		
		<!-- 底部按钮 -->
		<view class="bottom-buy safe-area-inset-bottom">
			<!-- <button open-type='share' class="sharebtn" > -->
				<text class="iconfont icon-fenxiang" @click="showPopup = true"></text>
			<!-- </button> -->
			<view v-if="!isHidCart" class="iconfont icon-group" @click="goShopCar()">
				<text v-if="goodsCarNum">{{goodsCarNum}}</text>
			</view>
			
			
			<view v-if="!isHidCart" class="btn-bai" @click="show=true">加入购物车</view>
			<view v-if="isHidCart" @click="show=true" class="btn-ho hidBuy">立即购买</view>
			<view v-else @click="show=true" class="btn-ho">立即购买</view>
		</view>
		
		
		<!-- 二维码弹窗 -->
		<u-popup v-model="showPopup" safe-area-inset-bottom mode="center" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.5)'}" border-radius="40" @close="close">
			<view class="popBox">
				<view class="popBox-bg">
					<image class="popBox-bg-img" :src="swiperList[0].image"></image>
					<view class="popBox-bg-view">
						<view class="popBox-bg-view-box">
							<view class="titleL">{{goods.title}}</view>
							<view class="priceL"><text>￥</text>{{selectSku.sale_price}}</view>
						</view>
						<view class="popBox-bg-view-dec">规格：{{selectSku.sku_text}}</view>
					</view>
					<view class="popBox-bg-box">
						<view class="popBox-bg-box-left">
							<view class="title">Hey~</view>
							<view class="dec">扫描二维码查看项目哦！</view>
						</view>
						<view class="popBox-bg-box-right">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/Group 1000016583.png"></image>
						</view>
					</view>
				</view>
			
				<view class="shareF">
					<image class="shareF-title" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/fenxiangzhi.png"></image>
					<view class="shareF-view">
						<view @click.native="downloadFile()">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bendi.png"></image>
						</view>
						<view>
							<button open-type='share' class="sharebtn" >
								<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/weixin.png"></image>
							</button>
						</view>
						<view @click.native="guideToTimelineShare()">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/pengyou.png"></image>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPhoneAuth:false,
				login:false,
				goods_id:'',
				isChih:false,
				price:0,		//价格
				scopePrice:0,	//范围价格
				swiperList:[],	//轮播图
				selectSku:{},
				skuGoods:{},
				value:1,		//数量
				skuName:[],		//规格名称
				skuId:0,		//skuid
				priceNum:0,		//暂时价格
				activeList:[],	//选择的规格索引
				selectList:[],	//选中的规格id
				isBtn:false,	//防重复点击
				goods:{},
				show1:false,
				isTop:true,
				opacityNum:0,
				num:1,
				show:false,
				payIndex:0,
				skrInfo:[],
				showPopup: false,
				pay:[{
					img:'https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/13/2x.png',
					title:'会员卡支付',
				},{
					img:'https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/13/-2x.png',
					title:'微信支付',
				}],
				skuId:'',
				store_ids:'',
				loginInfo:{
					code:'',
					iv:'',
					encryptedData:'',
					store_id:'',
					share_user_id:'',
					encryptedDataPhone:'',
					ivPhone:''
				},
				commentList: {},
				isHidCart: false,
			};
		},
		onLoad({goods_id,share_user_id,store_id,share_goods_id, scene, recur, hiddCar}) {
			this.isHidCart = hiddCar === "1";
			if(share_goods_id){
				this.$u.vuex("share_goods_id",share_goods_id)
			}
			console.log(goods_id,"goods_id",share_user_id,"share_user_id",store_id,"store_id","share_goods_id",share_goods_id)
			if(store_id){
				this.store_ids = store_id
				this.$u.vuex("store_id",this.store_ids)
			}
			if(share_user_id){
				this.$u.vuex("share_user_id",share_user_id)
			}
			this.goods_id = goods_id
			// 二维码携带参数
			if (scene) {
				const sceness = decodeURIComponent(scene || '');
				const params = this.parseQuery(sceness);
				console.log('二维码携带参数------------：', params)
				if (params.sz) {
					let newSz = params.sz.split("-")
					console.log('sz----', newSz)
					this.goods_id = newSz[0]
					this.store_ids = newSz[2]
					this.$u.vuex("store_id", newSz[2])
					this.$u.vuex("share_goods_id", newSz[0])
					this.$u.vuex("share_user_id", newSz[1])
				}
			}
			
			this.getGoods()
			if(this.token){
				this.getCarList()
			}
			
			if (recur == 1){
				setTimeout(()=>{
					this.show = true
				}, 500)
			}
			
		   console.log(share_user_id,share_goods_id,"获取分享参数")
		},
		//分享到朋友圈
		onShareTimeline: function (res) {
			 var that = this;
			 that.setUserShare()
			let goods_id=that.goods_id;//获取产品id
			let goods_title=that.goods.title;//获取产品标题
			let goods_img=that.selectSku.img;//产品图片
			return {
				title: goods_title,
				path: `/pages/shop/shopInfo?goods_id=${goods_id}&share_user_id=${that.userInfo.id}&store_id=${that.store_id}&share_goods_id=${goods_id}`,
				imageUrl:goods_img //不设置则默认为当前页面的截图
			}
		},
		onShareAppMessage: function (res) {
		    var that = this;
			that.setUserShare()
			// let user_id = this.$store.state.userData.user_id
		    let goods_id=that.goods_id;//获取产品id
		    let goods_title=that.goods.title;//获取产品标题
		    let goods_img=that.selectSku.img;//产品图片
			  if (res.from === 'button') {
			     // 来自页面内转发按钮
			 	  return {
			 		 title: goods_title,
			 		 path: `/pages/shop/shopInfo?goods_id=${goods_id}&share_user_id=${that.userInfo.id}&store_id=${that.store_id}&share_goods_id=${goods_id}`,
			 		 imageUrl:goods_img //不设置则默认为当前页面的截图
			 	   }
			   }
		},
		watch:{
			selectList(to){
				console.log(666, to)
				let val=0,str='',size=to.length;
				for(let j in to){
					if(to[j]!=-1){
						str+=to[j]+','
					}
				}
				str = str.substring(0, str.length - 1);
				console.log(this.goods, str, 'str');
				if(!this.goods.sku)return;
				this.goods.sku.forEach(v=>{
					console.log(v,'v.attr_val_path==str');
					if(v.attr_val_path==str){
						console.log(v.price,"jiaaaa");
						if(this.userInfo.vip_id >= 1){
							val = v.vip_price;
						}else{
							val = v.sale_price;
						}
						this.selectSku = v;
						if(this.value>v.stock){
							this.value = v.stock||1;
						}
						this.skuId = v.id
					}
				})
				console.log(this.selectSku,"selectSku",val)
				this.priceNum = val;
			}
		},
		onPageScroll(res) {
			//获取距离顶部距离
			const scrollTop = res.scrollTop;
			if (scrollTop >= 0) {
				// 导航条颜色透明渐变
				if (scrollTop <= 20 && !this.isTop) {
					this.opacityNum = 0;
					this.isTop = true;
					uni.setNavigationBarColor({
						frontColor:'#ffffff',
						backgroundColor:'#000000',
						success() {
							console.log("@");
						},
						fail(err) {
							console.log(err);
						}
					})
				} else if(scrollTop > 20 &&this.isTop){
					this.isTop = false;
					uni.setNavigationBarColor({
						frontColor:'#000000',
						backgroundColor:'#FFFFFF',
						success() {
							console.log("@1");
						},
						fail(err) {
							console.log(err);
						}
					})
				}
				if (20 < scrollTop && scrollTop <= 100) {
					this.opacityNum = scrollTop / 100;
				} else if (scrollTop > 100) {
					this.opacityNum = 1;
				}
			}
		},
		methods:{
			parseQuery(queryStr) {
			  const params = {};
			  queryStr.split('&').forEach(pair => {
			    const [key, value] = pair.split('=');
			    if (key) params[key] = decodeURIComponent(value || '');
			  });
			  return params;
			},
			guideToTimelineShare() {
			    uni.showModal({
			      title: '提示',
			      content: '请点击右上角菜单，选择"分享到朋友圈"',
			      showCancel: false
			    })
			},
			// 保存
			downloadFile() {
				uni.downloadFile({
					url: this.swiperList[0].image,//图片地址
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => { 
				                this.toast('保存成功')
				            },
							fail: (res) => { 
								this.toast('保存失败')
				            }
						})
					}
				})
			},
			dataTime(num) {
				// 获取当前日期
				let currentDate = new Date();
				
				// 将日期加一天
				currentDate.setDate(currentDate.getDate() + num);
				
				// 获取年月日
				let year = currentDate.getFullYear();
				let month = String(currentDate.getMonth() + num).padStart(2, '0'); // 月份是从0开始的，所以加1
				let day = String(currentDate.getDate()).padStart(2, '0');
				
				// 格式化为 年-月-日
				let formattedDate = `${year}-${month}-${day}`;
				return formattedDate
			},
			// 保存分享记录
			async setUserShare(){
				let {code,data} = await this.$u.api.setUserShare({goods_id:this.goods_id});
			},
			goShopCar(){
				if(!this.token){
					this.login = true
					return
				}
				this.utlis.goUrl('/pages/shop/shopCar')
			},
			plus(){
				if(this.value>=this.selectSku.stock){
					this.$u.toast('库存不足!')
				}
			},
			share(){
				if(!this.token){
					this.login = true
					return
				}
			},
			async confirm(type){//确定
				if(!this.token){
					this.login = true
					return
				}
				// if(this.goods.is_entity == 1 || this.goods.is_frequency == 1){
				// 	this.$u.toast('此商品暂不支持线上购买!')
				// 	return
				// }
				if(this.selectSku.stock <= 0){
					this.$u.toast('库存不足!')
					return
				}
				if(this.activeList.findIndex(v=>v!=-1)!=-1){
					console.log(this.priceNum,'this.priceNum');
					if(this.priceNum){
						this.price = this.priceNum;
						this.skuJk = this.skuName.join(' ');
						this.show = false;
						this.isChih = true;
						if(type==1){
							let {code,data} = await this.$u.api.joinCar({sku_id:this.skuId,number:this.value});
							if(code){
								// this.$u.toast('加入购物车成功!');
								this.getCarList()
								this.utlis.Toast('加入购物车成功',"success")
							}
						}else {
							// confirmOrder
							let goosArr = []
							goosArr.push({
								sku_id:this.skuId,
								number:this.value
							})
							// let sku = {
							// 	skus:JSON.stringify(goosArr)
							// }
							// let {code,data} = await this.$u.api.confirmOrder(sku);
							// if(code){
								// goodsInfo
								// data.goods_id = this.goods_id
								// this.$u.vuex('goodsInfo', data)
								
								this.$u.vuex('goodsInfo', "")
								this.$u.vuex("toStore","")
								this.$u.vuex("toStore_id","")
								
								// if(this.store_ids){
								// 	 this.getStore()
								// }
								let utl = '/pages/shop/shopOrder?is_cart=0&skus=' + JSON.stringify(goosArr);
								if(this.isHidCart){
									utl+= "&hiddCar=1"
								}
								
								this.$u.route(utl);
							// }
						}
					}else {
						this.$u.toast('请选择规格');
						console.log(1111111111)
					}
				}else {
					this.$u.toast('请选择规格')
					console.log(22222222222)
				};
			},
			 addsele(i,i2,item){//规格选择
				if(item.isShow)return;
				// this.getAttrIds(this.goods.attr[i].val[i2].id)
				
				console.log(this.skuName,i,i2,"规格选择",this.activeList[i],i2,this.skuName[i], this.activeList)
				if(this.activeList[i]==i2){
					// this.activeList.splice(i,1,-1);
					// this.selectList.splice(i,1,-1);
					// this.skuName.splice(i,1)
				}else{
					this.activeList.splice(i,1,i2);
					this.selectList.splice(i,1,Number(item.id));
					this.skuName.splice(i,1,item.attr_value)
				}
				console.log(this.skuName,"this.skuName",this.activeList,this.selectList,this.skuId)
			},
			async getAttrIds (id) {
				let {code,data} = await this.$u.api.getAttrIds({attr_id: id});
				if(code){
					this.goods.attr.forEach(item =>{
						item.val.forEach(obj =>{
							// if (this.selectList.includes(obj.id+''))
							if (!data.includes(obj.id+'')) {
								obj.isShow = true
							} else {
								obj.isShow = false
							}
						})
					})
					let newData = JSON.parse(JSON.stringify((this.goods.attr)))
					this.goods.attr = []
					this.goods.attr = newData
					console.log(998, this.goods.attr)
				}
			},
			async getGoods(){
				console.log(this.userInfo,"this.userInfo")
				let params ={
					user_id:this.userInfo.id ? this.userInfo.id : '',
					id:this.goods_id,
					share_user_id:this.share_user_id
				}
				console.log(params,"获取详情传的参数")
				this.swiperList = [];
				this.activeList = [];
				this.selectList = [];
				let {code,data} = await this.$u.api.getGoods(params);
				if(code){
					data.picture.split(',').forEach(v=>{
						this.swiperList.push({
							image:v
						})
					})
					this.skrInfo = data.sku[0]
					let sku = [];
					for(let j in data.sku){
						sku.push(...data.sku[j].attr_val_path.split(','));
					}
					for(let i in data.attr){
						let isNo = true;
						for(let j in data.attr[i].val){
							if(sku.findIndex(v=>v==data.attr[i].val[j].id)==-1){
								data.attr[i].val[j].isShow=true;
							} else if(isNo){
								console.log(888, sku, data.attr[i].val[j].id)
								let cid = data.attr[i].val[j].id;
								this.activeList.push(j); //选择的规格索引
								this.selectList.push(cid); //选中的规格id
								isNo = false;
							}
						}
					}
					this.goods = data;
					this.getComment(this.goods.id)
				}
				// this.getAttrIds(this.selectList[0])
				console.log(999, this.activeList, this.selectList)
			},
			async getComment(goods_id){
				let {data,code} = await this.$u.api.goodsGetComment({goods_id: goods_id});
				this.commentList = data.data[0]
				if (data.data[0]) {
					this.commentList.files = this.commentList.files.split(",")
				}
			},
			// 获取购物车列表
			async getCarList(){
				let {code,data} = await this.$u.api.carLists();
				if(code){
					let num = data.length
					this.$u.vuex('goodsCarNum', num)
				}
			},
			// 授权手机号码
			async getPhoneNumber(e){
				this.loginInfo.encryptedDataPhone = e.detail.encryptedData
				this.loginInfo.ivPhone = e.detail.iv
				if(e.detail.iv){
					uni.login ({
						success: async res => {
							let { code } = res
							 this.loginInfo.code = res.code
							 await this.wxLogin()
						}
					})
				}
			},
			// 授权用户信息
			async getuserinfo(e){
				uni.showLoading({title: '登录中'});
				// 登录
				uni.login({
					success: res => {
					 this.loginInfo.code = res.code
					 this.isClick = true
					}
				})
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: async (res) => {
						let { iv, encryptedData } = res;
						this.loginInfo.iv = iv
						this.loginInfo.encryptedData = encryptedData
						this.loginInfo.share_user_id = this.share_user_id
						this.loginInfo.store_id = this.store_ids ? this.store_ids : this.store_id,
						this.loginInfo.fid = this.fid
						this.wxLogin()
				   },
				   fail:(res1)=>{
					   console.log(res1,'登录失败');
					   this.isClick = false
				   }
				})
			},
			// 登录
			async wxLogin(){
				let {data,code,msg} = await this.$u.api.wxLogin(this.loginInfo);
				uni.hideLoading()
				if(code){
					this.login = false
					if(data.user_token){
						this.$u.vuex('token', data.user_token)
						await this.getUserInfo()
						if(this.store_ids){
							await this.getGoods()
						}
						this.utlis.Toast("登录成功",true)
					}else{
						this.isPhoneAuth = true
					}
				}else{
					this.isClick = false
				}
			},
			// 获取用户信息
			async getUserInfo(){
				let store_id = this.store_ids ? this.store_ids : this.store_id
				let {data,code} = await this.$u.api.userInfo({store_id:store_id});
				if(code){
					this.$u.vuex('userInfo', data)
				}
			},
			
			
			// 获取全部门店
			async getStore(type){
				let minArr = []
				let {data,code} = await this.$u.api.getStore();
				let dates = data[0]
				let dates_id = dates.id
				this.$u.vuex("defaultAddress",dates)
				this.$u.vuex("store_id",dates_id)
				this.$u.vuex("makeStoreInfo",dates)
				this.$u.vuex("makeStore_id",dates_id)
				this.$u.vuex("toStore",dates)
				this.$u.vuex("toStore_id",dates_id)
			},
		}
	}
</script>

<style lang="scss" scoped>
.bgs{
	width: 100%;
	background: #F1F6FA;
	height: 24rpx;
}
.pages{
	position: relative;
	.select-pay{
		padding: 40rpx 43rpx;
		.title{
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
			line-height: 37rpx;
			margin-bottom: 38rpx;
		}
		.select{
			display: flex;
			align-items:center;
			margin-bottom: 36rpx;
			font-size: 28rpx;
			font-weight: 400;
			text-align: left;
			color: #333333;
			line-height: 40rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
			.iconfont{
				padding: 10rpx 20rpx;
			}
			.icon-a-xingzhuang1{
				color: rgba(209,184,125,1);
			}
		}
		.price-box{
			border-top: 1px solid #d8d8d8;
			padding-top: 50rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			text-align: left;
			color: #666666;
			line-height: 42rpx;
			text{
				font-size: 30rpx;
				font-weight: 400;
				text-align: left;
				color: #007664;
				line-height: 42rpx;
			}
			.btn{
				margin-left: auto;
				width: 236rpx;
				height: 70rpx;
				background: #007664;
				border-radius: 6rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.bgcolor{
		width: 750rpx;
		height: 476rpx;
		image{
			width: 100%;
			height: 476rpx;
			display: block;
		}
	}
	.vessel{
		position: absolute;
		width: 100%;
		z-index: 2;
		// padding: 0 35rpx;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);
		background: #ffffff;
		padding-bottom: 300rpx;
		.prive{
			display: flex;
			// height: 124rpx;
			align-items: center;
			padding: 0 35rpx;
			// border-bottom: 1px solid rgba(151,151,151,0.38);
			margin-top: 25rpx;
			.left-auto{
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 33rpx;
			}
			.discounts{
				font-size: 40rpx;
				font-weight: 500;
				text-align: left;
				color: #007664;
				line-height: 38rpx;
				text{
					font-size: 30rpx;
					margin-right: 10rpx;
				}
			}
			.market{
				margin-left: 20rpx;
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #999999;
				text-decoration:line-through;
			}
			view{
				margin-left: auto;
				font-size: 24rpx;
				font-weight: 400;
				text-align: left;
				color: #666666;
				line-height: 33rpx;
				text{
					margin-right: 8rpx;
				}
			}
		}
		.goods-title{
			// height: 114rpx;
			padding: 0 35rpx;
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 45rpx;
		}
		.goods-sku{
			// padding: 0 12rpx;
			padding: 0 35rpx;
			// background: #f6f7fa;
			border-radius: 20rpx;
			margin-bottom: 32rpx;
			
			.sku{
				// padding: 0 26rpx;
				height: 90rpx;
				display: flex;
				align-items: center;
				// border-bottom: 1px solid rgba(142,142,142,0.24);
				&:nth-last-child(1){
					border-bottom: none;
				}
				
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 26rpx;
				.t2{
					font-size: 24rpx;
					color: #999999;
				}
				.icon-a-arrowbeifen3{
					color: #999999;
				}
				.t1{
					margin-right: auto;
					font-size: 28rpx;
					color: #242833;
					font-weight: bold;
					image{
						width: 9rpx;
						height: 29rpx;
						position: relative;
						top: 5rpx;
						margin-right: 12rpx;
					}
				}
			}
		}
		
		.goods-info{
			padding: 0 35rpx;
			.title{
				font-size: 28rpx;
				color: #242833;
				line-height: 26rpx;
				margin-bottom: 32rpx;
				margin-top: 32rpx;
				font-weight: bold;
				image{
					width: 9rpx;
					height: 29rpx;
					position: relative;
					top: 5rpx;
					margin-right: 12rpx;
				}
			}
		}
	}
	.sharebtn{
		display: inline-block;
		border: none;
		padding: 0;
		margin: 0;
		// border: 1rpx solid red;
		line-height: 0rpx;
		text{
			position: relative;
			top: 40rpx;
		}
	}
	.bottom-buy{
		z-index: 99;
		box-shadow: 0px 0px 13rpx 0px rgba(110,126,189,0.18); 
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 35rpx 35rpx 105rpx;
		display: flex;
		background-color: #fff;
		.iconfont{
			padding: 15rpx;
			font-size: 48rpx;
			position: relative;
			margin-right: auto;
			text{
				font-size: 24rpx;
				position: absolute;
				right: -5rpx;
				top: -5rpx;
				width: 36rpx;
				height: 36rpx;
				background: #b23213;
				border-radius: 50%;
				text-align: center;
				color: #ffffff;
				line-height: 36rpx;
			}
		}
		.btn-bai{
			width: 240rpx;
			height: 80rpx;
			background: linear-gradient(140deg, #E5C372 0%, #F0E2A0);
			border-radius: 53rpx 0 0 53rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn-ho{
			width: 240rpx;
			height: 80rpx;
			background: linear-gradient(140deg, #50DCC2 0%, #007664);
			border-radius: 0 53rpx 53rpx 0;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.hidBuy{
			border-radius: 53rpx;
			width: 320rpx;
		}
	}
	.detailsGoods{
		margin-top: 30rpx;
		padding: 0 35rpx;
		&__view{
			display: flex;
			border-top: 1rpx solid #EDEDED;
			padding: 28rpx 0;
			&-name{
				font-size: 28rpx;
				color: #242833;
				margin-right: 42rpx;
				font-weight: bold;
			}
			&-box{
				// width: 90%;
				// border: 1rpx solid;
				position: relative;
				flex: 1;
				.icon-a-arrowbeifen3{
					position: absolute;
					right: 0;
					top: 5rpx;
				}
				view{
					display: inline-block;
					font-size: 28rpx;
					color: #666666;
					margin-right: 15rpx;
				}
				image{
					width: 31rpx;
					height: 31rpx;
					position: relative;
					top: 5rpx;
					margin-right: 5rpx;
				}
			}
		}
	}

	.evaluate{
		width: 686rpx;
		background: #FAFAF6;
		padding: 22rpx;
		border: none;
		border-radius: 18rpx;
		&__box{
			display: flex;
			&-left{
				image{
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}
			}
			&-right{
				flex: 1;
				position: relative;
				&-time{
					position: absolute;
					top: 0;
					right: 0;
					font-size: 24rpx;
					color: #999999;
				}
				&-title{
					font-size: 26rpx;
					color: #242833;
					display: flex;
					margin-left: 20rpx;
					view{
						
						width: 114rpx;
						height: 31rpx;
						line-height: 28rpx;
						color: #845C11;
						font-size: 18rpx;
						background: #E5C372;
						text-align: center;
						margin-left: 30rpx;
					}
					image{
						width: 19rpx;
						height: 19rpx;
						position: relative;
						top: 2rpx;
						margin-right: 5rpx;
					}
				}
				&-dec{
					width: 100%;
					margin-left: 20rpx;
					color: #999999;
					font-size: 20rpx;
					margin-top: 10rpx;
					display: flex;
					text{
						// border: 1rpx solid red;
						flex: 1;
					}
				}
			}
		}
		&__dec{
			font-size: 24rpx;
			color: #4D5562;
			margin: 20rpx 0;
		}
		&__img{
			display: flex;
			justify-content: space-between;
			image{
				width: 148rpx;
				height: 148rpx;
				border-radius: 12rpx;
			}
		}
	}

}
.redP{
	color: #b23213 !important;
}
.popBox{
	background-color: transparent !important;
	&-bg{
		width: 616rpx;
		height: 890rpx;
		// background-image: url('//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/Group 1000016583.png');
		// background-repeat: no-repeat;
		// background-size: cover;
		// text-align: center;
		background: white;
		border-radius: 50rpx;
		&-img{
			width: 560rpx;
			height: 545rpx;
			margin: 28rpx;
			border-radius: 50rpx;
		}
		&-box{
			display: flex;
			margin: 30rpx 28rpx 0 28rpx;
			&-left{
				flex: 1;
				.title{
					font-size: 32rpx;
					color: #4D5562;
				}
				.dec{
					font-size: 24rpx;
					color: #999999;
					margin-top: 10rpx;
				}
			}
			&-right{
				image{
					width: 111rpx;
					height: 111rpx;
				}
			}
		}
		&-view{
			&-box{
				display: flex;
				margin-left: 26rpx;
				.titleL{
					width: 70%;
					// border: 1rpx solid red;
					font-size: 36rpx;
					color: #333333;
					white-space:nowrap; 
					overflow:hidden; 
					text-overflow:ellipsis;
				}
				.priceL{
					flex: 1;
					color: #007664;
					font-size: 35rpx;
					text-align: right;
					margin-right: 26rpx;
					text{
						font-size: 20rpx;
					}
				}
			}
			&-dec{
				margin-left: 26rpx;
				font-size: 26rpx;
				color: #999999;
				padding-bottom: 20rpx;
				border-bottom: 1rpx dashed #EDEDED;
				width: 90%;
				margin-top: 5rpx;
			}
		}
	}
	.shareF{
		background-color: transparent !important;
		text-align: center;
		&-title{
			width: 237rpx;
			height: 24rpx;
			margin: 65rpx 0 52rpx 0;
		}
		&-view{
			display: flex;
			justify-content: space-between;
			width: 85%;
			margin: 0 auto;
			view{
				flex: 1;
				text-align: center;
				image{
					width: 100rpx;
					height: 144rpx;
				}
			}
		}
	}
}
::v-deep .u-mode-center-box{
	background-color: transparent !important;
}
.sharebtn{
	margin: 0;
	padding: 0;
	background: transparent;
}
.specification{
		height: 100%;
		background-color: #fff;
		position: relative;
		padding: 38rpx;
		.close{
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			padding: 20rpx;
			font-size: 44rpx;
			color: #8A8A8A;
		}
		.goods-msg{
			display: flex;
			height: 157rpx;
			margin-bottom: 20rpx;
			image{
				width: 157rpx;
				height: 157rpx;
				border-radius: 8rpx;
			}
			.goods-price{
				height: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				margin-left: 45rpx;
				padding: 8rpx 0;
				box-sizing: border-box;
				.title{
					color: #000000;
					font-size: 32rpx;
				}
				.inventory{
					color: #007664;
					font-size: 28rpx;
					margin-top: 20rpx;
				}
				.price{
					font-weight: 600;
					font-size: 48rpx;
					color: #007664;
					line-height: 29rpx;
					text{
						font-size: 36rpx;
						margin-right: 5rpx;
					}
				}
				.format{
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
		.t1-title{
			font-size: 26rpx;
			font-weight: 600;
			margin-top: 45rpx;
			margin-bottom: 36rpx;
			display: flex;
			justify-content: space-between;
			color: #333333;
			
			::v-deep .u-numberbox{
				background-color: #FFFFFF !important;
				margin-top: 40rpx;
				.u-icon-plus, .u-icon-minus{
					width: 45rpx !important;
					height: 45rpx !important;
				}
			}
			::v-deep .u-number-input{
				background-color:#FFFFFF;
			}
		}
		.pl-title{
			font-size: 26rpx;
			font-weight: 600;
			margin-top: 15rpx;
			display: flex;
			justify-content: space-between;
			color: #333333;
			
			::v-deep .u-numberbox{
				background-color: #FFFFFF !important;
				margin-top: 10rpx;
				.u-icon-plus, .u-icon-minus{
					width: 45rpx !important;
					height: 45rpx !important;
				}
			}
			::v-deep .u-number-input{
				background-color:#FFFFFF;
			}
		}
		.format-box{
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			.format-zi{
				color: #333333;
				margin: 0 10rpx 20rpx;
				font-size: 24rpx;
				color: #666;
				// padding: 16rpx 37rpx;
				background: #F9F9F9;
				width: 125rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 4rpx;
				&:nth-child(1){
					margin: 0 0 20rpx 10rpx;
				}
			}
			.format-zi-active{
				color: #007664;
				background-image: url('//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg10.png');
				background-size: cover; //覆盖整个页面
				background-repeat: no-repeat; //不重复
			}
			.format-zi-disabled{
				color: #000 !important;
				background-color: #c9c9c9 !important;
				opacity: .5 !important;
				// border: 1px solid #c1c1c1;
			}
		}
		.subimt{
			position: absolute;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			display: flex;
			text-align: center;
			padding: 0rpx 40rpx 0 42rpx;
			.cancel{
				text-align: center;
				width: 343rpx;
				line-height: 96rpx;
				background: linear-gradient( 135deg, #E5C372 0%, #F0E2A0 100%);
				border-radius: 47rpx 0rpx 0rpx 47rpx;
				color: #FFFFFF;
				font-size: 32rpx;
			}
			.grayOut{
				text-align: center;
				width: 100%;
				line-height: 96rpx;
				background: linear-gradient( 135deg, #666 0%, #999 100%);
				border-radius: 47rpx 47rpx;
				color: #FFFFFF;
				font-size: 32rpx;
			}
			.confirm{
				text-align: center;
				color: #FFFFFF;
				font-size: 32rpx;
				width: 343rpx;
				line-height: 96rpx;
				background: linear-gradient( 98deg, #50DCC2 0%, #007664 100%);
				border-radius: 0rpx 47rpx 47rpx 0rpx;
			}
			.hidBuy2{
				width: 100%;
				border-radius: 47rpx;
			}
		}
	}
	
		::v-deep .u-number-input{
			background-color:#F6F7FA;
		}
		::v-deep .u-numberbox{
			// overflow: hidden;
			height: 30rpx;
			background: #F6F7FA;
		}
		::v-deep .u-icon-minus{
			// width: 60rpx!important;
			// height: 60rpx !important;
			color: #DEDEE1 !important;
			background: #EDEDED !important;
			border-radius: 4rpx !important;
		}
		::v-deep .u-icon-plus{
			// width: 60rpx!important;
			// height: 60rpx !important;
			background: #007664 !important;
			color: #fff !important;
			border-radius: 4rpx !important;
		}
		::v-deep .uicon-plus,.uicon-minus{
			font-size: 20rpx !important;
		}
	.u-number-input{
		background-color:#F6F7FA;
	}
	button:after{
		border: none;
	}
	button{
		background-color: #FFFFFF;
		font-size: 28rpx;
		// color: #666;
	}
	.available{
		text-align: center;
		color: #666666;
		font-size: 26rpx;
		margin: 10rpx 0 50rpx 0;
	}
</style>
